<template>
  <div>
    <sub-title :subTitle="'订单详情'" :isBack="true"></sub-title>
    <div class="body">
      <el-steps
        :active="datalist.status"
        align-center
        finish-status="success"
        style="margin-bottom: 30px;"
      >
        <el-step title="提交订单" :description="datalist.creatTime"></el-step>
        <el-step title="支付订单" :description="datalist.finishTime"></el-step>
        <el-step title="平台发货" :description="datalist.sendEndTime"></el-step>
        <el-step title="确认收货" :description="datalist.creatTime"></el-step>
        <el-step title="完成评价" :description="datalist.finishEndTime"></el-step>
      </el-steps>
      <div class="order-info clearFix">
        <p class="fl">
          <i class="el-icon-warning font-15 red"></i>
          <span class="font-15 red">当前订单状态: {{ datalist.status | getOrderStatus }}</span>
        </p>
        <div class="fr">
          <button
            class="mall-btn"
            @click="dialogVisible = true; dialogStatus = 1; title = '修改收货人信息';"
          >修改收货人信息</button>
          <button class="mall-btn" v-if="datalist.status == 1" @click="close">关闭订单</button>
          <button
            class="mall-btn"
            @click="dialogVisible = true; dialogStatus = 2; title = '备注订单';"
          >备注订单</button>
        </div>
      </div>
      <div class="table flex">
        <p class="title">基本信息</p>
        <div>
          <div>订单id</div>
          <div>{{ datalist.id }}</div>
        </div>
        <div>
          <div>订单编号</div>
          <div>{{ datalist.code }}</div>
        </div>
        <div>
          <div>用户账号</div>
          <div>{{ mobilePhone }}</div>
        </div>
        <div>
          <div>支付方式</div>
          <div>微信小程序支付</div>
        </div>
        <div>
          <div>订单来源</div>
          <div>小程序</div>
        </div>
        <div>
          <div>订单类型</div>
          <div>{{ datalist.type == 1 ? '普通类型' : '限时秒杀' }}</div>
        </div>
        <div>
          <div>配送方式</div>
          <div>{{ datalist.sendCompany }}</div>
        </div>
        <div>
          <div>物流单号</div>
          <div>{{ datalist.sendCode }}</div>
        </div>
        <div>
          <div>自动确认收货时间</div>
          <div>{{ datalist.finishEndTime }}</div>
        </div>
      </div>
      <div class="table flex">
        <!-- style="border-bottom-color: transparent;" -->
        <p class="title">收货人信息</p>
        <div>
          <div>收货人</div>
          <div>{{ datalist.receiver }}</div>
        </div>
        <div>
          <div>手机号码</div>
          <div>{{ datalist.phone }}</div>
        </div>
        <div>
          <div>邮政编码</div>
          <div></div>
        </div>
        <div>
          <div>收货地址</div>
          <div>{{ datalist.address }}</div>
        </div>
      </div>

      <p class="el-title">商品信息</p>
      <el-table
        class="mall-table"
        :data="datalist.details"
        :header-cell-style="headerStyle"
        :cell-style="tdStyle"
      >
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="getGoodImg(scope.row.goodsPic)">
          </template>
        </el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">{{ scope.row.goodsName }}</template>
        </el-table-column>
        <el-table-column label="价格/货号">
          <template slot-scope="scope">{{ scope.row.goodsPrice }}/{{ scope.row.goodsNo }}</template>
        </el-table-column>
        <el-table-column label="属性">
          <template slot-scope="scope">{{ scope.row.goodsDesc }}</template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <span>{{ scope.row.buyNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌">
          <template slot-scope="scope">
            <span>{{ scope.row.goodsBrand }}</span>
          </template>
        </el-table-column>
        <el-table-column label="小计">
          <template slot-scope="scope">
            <span>{{ scope.row.totalMoney }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="table flex">
        <p class="title">费用信息</p>
        <div>
          <div>商品合计</div>
          <div>{{ datalist.totalMoeny }}</div>
        </div>
        <div>
          <div>运费</div>
          <div>包邮</div>
        </div>
        <div>
          <div>订单总金额</div>
          <div>{{ datalist.totalMoeny }}</div>
        </div>
        <div>
          <div>应付款金额</div>
          <div>{{ datalist.totalMoeny }}</div>
        </div>
      </div>
      <el-dialog :title="title" :visible.sync="dialogVisible" :append-to-body="true" width="30%">
        <el-form :model="ruleForm" :rules="rules1" ref="ruleForm" label-width="100px" class="form">
          <div v-if="dialogStatus == 1">
            <el-form-item label="收货人姓名: " prop="receiver">
              <el-input v-model="ruleForm.receiver"></el-input>
            </el-form-item>
            <el-form-item label="手机号码: " prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="详细地址: " prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
          </div>
          <div v-if="dialogStatus == 2">
            <el-form-item label="操作备注: " style="margin-bottom: 0;">
              <el-input v-model="mechantRemark" type="textarea" :rows="5"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="mall-btn" @click="dialogVisible = false">取 消</el-button>
          <el-button class="mall-btn active" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import subTitle from "@/components/subTitle";
import mixin from "@/utils/mixin";
import filters from "@/utils/filters";
export default {
  name: "list",
  mixins: [mixin],
  filters: filters,
  components: {
    subTitle
  },
  data() {
    return {
      datalist: {},
      title: "修改收货人信息",
      mechantRemark: "",
      dialogVisible: false,
      dialogStatus: 1,
      mobilePhone: "",
      ruleForm: {},
      rules1: {
        receiver: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" },
          { max: 20, message: "长度必须小于20个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { max: 11, message: "请输入正确的手机号", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ]
      },
      rules2: {
        mechantRemark: [
          { required: true, message: "请输入订单备注", trigger: "blur" }
        ]
      }
    };
  },
  created: function() {
    if (this.$route.query.id) {
      this.getOrderInfo();
      this.mobilePhone = this.$route.query.mobilePhone;
    }
  },
  methods: {
    close() {
      this.$confirm("确定关闭订单嘛", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        this.$http
          .post("/merchant_order/update", {
            id: this.$route.query.id,
            status: 0
          })
          .then(() => {
            this.getOrderInfo();
            this.$msgSuc("关闭成功");
          });
      });
    },
    getOrderInfo() {
      this.$http
        .post("merchant_order/query_By_Id", {
          id: this.$route.query.id,
          merchantId: JSON.parse(localStorage.userInfo).merchantId
        })
        .then(
          res => {
            this.datalist = res;
            this.$set(this.ruleForm, "receiver", res.receiver);
            this.$set(this.ruleForm, "phone", res.phone);
            this.$set(this.ruleForm, "address", res.address);
            this.$set(this.ruleForm, "id", res.id);
          },
          err => {
            this.$msgErr(err.msg);
          }
        );
    },
    submitForm(formName) {
      if (this.dialogStatus == 1) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$http.post("merchant_order/updateOrder", this.ruleForm).then(
              () => {
                this.getOrderInfo();
                this.$msgSuc("操作成功");
                this.dialogVisible = false;
              },
              err => {
                this.$msgErr(err.msg);
              }
            );
          } else {
            return false;
          }
        });
      } else {
        this.$http
          .post("merchant_order/updateOrder", {
            id: this.ruleForm.id,
            mechantRemark: this.mechantRemark
          })
          .then(
            () => {
              this.getOrderInfo();
              this.$msgSuc("操作成功");
              this.dialogVisible = false;
            },
            err => {
              this.$msgErr(err.msg);
            }
          );
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/css/common";

.body-detail {
  border: none;
  margin-bottom: 0;
  border-right: 1px solid #dedede;
}
.el-title {
  width: 100%;
  border: $border;
  border-bottom: none;
  line-height: 40px;
  font-weight: bold;
  padding-left: 20px;
  box-sizing: border-box;
  background-color: #efefef;
}
.table {
  margin: 30px 0;
  border: $border;
  .title {
    width: 100%;
    border-bottom: $border;
    line-height: 40px;
    font-weight: bold;
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #efefef;
  }
  > div {
    flex: 1;
    border-right: $border;
    &:last-child {
      border-right: none;
    }
    > div {
      line-height: 49px;
      font-size: 15px;
      text-align: center;
      &:first-child {
        line-height: 49px;
        color: $gray;
        font-weight: 700;
        background-color: #f6f6f6;
        border-bottom: $border;
      }
    }
  }
}
.form-wrap {
  margin-top: 50px;
  > div {
    width: 100%;
  }
}
.order-info {
  background-color: #efefef;
  padding: 20px;
  border: $border;
  p {
    line-height: 38px;
    span {
      margin-left: 10px;
    }
  }
}
</style>